<script setup>
import { Select } from '@element-plus/icons-vue'
import { getOrderDetailAPI, cancelOrderAPI, getOrderQRCodeAPI,getPayStatusAPI } from '@/api/order'
import { ref, onMounted} from 'vue'
import { useRoute } from 'vue-router'
import QRcode from 'qrcode'
import { ElMessage } from 'element-plus'

// 页面路由对象
const route = useRoute()

// 订单详情数据
const orderDetailData = ref({})

// 获取订单详情
const getOrderDetail = async () => {
    // 开启加载中
    loading.value = true
    const res = await getOrderDetailAPI(route.query.orderId)
    // console.log(res);
    // 关闭加载中
    loading.value = false
    orderDetailData.value = res.data
}

// 初始化
onMounted(() => {
    getOrderDetail()
})

// 页面加载
const loading = ref(false)

// 取消预约
const cancelOrder = async () => {
    const res = await cancelOrderAPI(route.query.orderId)
    // console.log(res);
    getOrderDetail()
}

// 定时器
const timer = ref(null)

// 支付
const payOrder = async () => {
    // 获取支付二维码
    const res = await getOrderQRCodeAPI(route.query.orderId)
    // console.log(res);
    // 将返回的字符串转换为二维码
    imgUrl.value = await QRcode.toDataURL(res.data.codeUrl)
    // console.log(imgUrl.value);
    dialogTableVisible.value = true

    // 开器定时器获取支付状态
    timer.value = setInterval( async () => {
        console.log('1');
        // 发请请求获取支付状态
        const result = await getPayStatusAPI(route.query.orderId)
        if(result.data) {
            ElMessage.success('支付成功')
            clearInterval(timer.value)
            closeDialog()
            getOrderDetail()
        }
    }, 2000);

}

// 二维码
const imgUrl = ref()

// 支付对话框
const dialogTableVisible  = ref(false)

// 关闭对话框
const closeDialog = () => {
    dialogTableVisible.value = false
    clearInterval(timer.value)
}
</script>
<template>
    <div class="detail">
        <el-card v-loading="loading">
            <template #header>
            <div class="card-header">
                <span>订单详情</span>
            </div>
            </template>
            <el-row style="justify-content: space-between; align-items: center;">
                <div class="left">
                    <el-icon size="large"><Select /></el-icon>
                    <span>{{ orderDetailData.param?.orderStatusString }}</span>
                </div>
                <div class="right">
                    <img src="../../../assets/images/code_app.png" alt="">
                    <span>微信关注“北京114预约挂号"T“快速预约挂号</span>
                </div>
            </el-row>
            <template #footer>
                <el-row>
                    <el-col :span="9">
                        <el-descriptions
                            :column="1"
                            border
                        >
                            <el-descriptions-item label="就诊人信息">{{ orderDetailData.patientName }}</el-descriptions-item>
                            <el-descriptions-item label="就诊日期">{{ orderDetailData.reserveDate }} 下午</el-descriptions-item>
                            <el-descriptions-item label="就诊医院" :span="2">北京人民医院</el-descriptions-item>
                            <el-descriptions-item label="就诊科室" >{{ orderDetailData.hosname }}</el-descriptions-item>
                            <el-descriptions-item label="医生职称">
                            <el-tag >{{ orderDetailData.title }}</el-tag>
                            </el-descriptions-item>
                            <el-descriptions-item label="医事服务费"
                            ><span style="color: red; font-weight: 700;">{{orderDetailData.amount}}元</span>
                            </el-descriptions-item>
                            <el-descriptions-item label="挂号单号" >{{ orderDetailData.outTradeNo }}</el-descriptions-item>
                            <el-descriptions-item label="挂号时间" >{{ orderDetailData.updateTime }}</el-descriptions-item>
                        </el-descriptions>
                        <el-row style="margin-top: 20px;">
                            <el-popconfirm title="你确定要取消预约吗?"
                            @cancel="() => {}"
                            @confirm="cancelOrder"
                            >
                                <template #reference>
                                <el-button size="large">取消预约</el-button>
                                </template>
                            </el-popconfirm>
                            <el-button @click="payOrder" size="large" style="width: 90px;" type="primary">支付</el-button>
                        </el-row>
                    </el-col>
                    <el-col style="margin-left: 20px;" :span="14">
                        <el-card shadow="never">
                            <template #header>
                            <div class="card-header">
                                <span>注意事项</span>
                            </div>
                            </template>
                            <p>1.请确认就诊人信息是否准确，若填写错误将无法取号就诊，损失由本人承担；</p>
                            <p style="color: red;">2.【取号】就诊当天需在{{orderDetailData.fetchTime}}前在医院取号，未取号视为爽约，该号不退不换；</p>
                            <p>3.【退号】在2{{orderDetailData.quitTime}}前可在线退号，逾期将不可办理退号退费；</p>
                            <p>4.北京114预约挂号支持自费患者使用身份证预约，同时支持北京市医保患者使用北京社保卡在平台预约挂号。请于就诊当日，携带预约挂号所使用挂号单号168593353746116的有效身份证件到院取号；</p>
                            <p>5.请注意北京市医保患者在住院期间不能使用社保卡在门诊取号。</p>
                            
                        </el-card>
                    </el-col>
                </el-row>
            </template>
        </el-card>
    </div>
    <div >
        <el-dialog @close="closeDialog" v-model="dialogTableVisible" title="微信支付" width="400">
        <div  class="dialog-body">
            <img :src="imgUrl" alt="">
            <p>请使用微信扫一扫</p>
            <p>扫描二维码支付</p>
        </div>
        <template #footer>
            <el-button @click="closeDialog">关闭窗口</el-button>
        </template>
  </el-dialog>
    </div>
</template>



<style lang="scss" scoped>
.detail {
    width: 1000px;
    ::v-deep(.el-card) {
        width: 100%;
    .card-header {
        span {
            color: #7f7f7f;
        }
        
    }
    .left {
        background-color:  rgb(18, 207, 18);
        color: #fff;
        font-weight: 700;
        padding: 8px;
        border-radius: 10px;
       height: 20px;
       display: flex;
       align-items: center;
       .el-icon {
        margin-right: 5px;
       }
    }
    .right {
        display: flex;
            align-items: center;
            justify-content: center;
        img {
            width:50px;
            height: 50px;
            
        }
        span {
            width: 200px;
            margin-left: 20px;
        }
    }
}
}

:deep(.el-dialog__body ) {
border-top: 1px solid #7f7f7f;
border-bottom: 1px solid #7f7f7f;

}
:deep .dialog-body {
    display: flex;
    align-items: center;
    flex-direction: column;
    img {
        width: 300px;
    }
    p {
        padding: 0;
        margin: 0;
        font-size: 18px;
        margin-top: 10px;
    }
}



</style>